html,
body {
  height: 100%;
}

.pages {
  width         : 100%;
  /* height     : 100%; */
  padding-bottom: 2rem;
  background    : var(--bg)
}

.usercenter-head {
  position: relative;
  height  : 5.5rem;
  overflow: hidden;
  background: url('../image/qrcode-bg.jpg') no-repeat center;
  background-size: cover;
  color: #FFFFFF;
}

.change-pass{
  width: 2rem;
  text-align: center;
  border-radius: 3rem;
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  line-height: 0.6rem;
  background-color: rgba(255, 255, 255, 0.4);
}

.head-box{
  height: 3rem;
  margin-top: 1rem;
  /*width: 2.5rem;*/
  text-align: center;
}
.avatar{
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
}

.assets-box{
  margin-top: 0.25rem;
  display: flex;
}

.assets-box div{
  width: 50%;
  text-align: center;
}

.assets-box div:first-child{
  border-right: 1px solid #FFFFFF;
}

.head-skew-top {
  height    : 9rem;
  width     : 200%;
  background: #ff87b0;
  transform : skewX(70deg);
  position  : absolute;
  left      : 7rem;
  z-index   : 0;
}

.heads {
  position   : absolute;
  z-index    : 2;
  left       : 2rem;
  top        : 2rem;
  display    : flex;
  align-items: center;
  color      : #fff;
  font-size  : 0.42rem;
  font-weight: bold;
}

.head-img {
  width        : 2.2rem;
  height       : 2.2rem;
  border-radius: 50%;
  margin-right : 0.4rem;

}

.head-img img {
  width        : 100%;
  height       : 100%;
  border-radius: 50%;

}

.head-text {
  position: absolute;
  bottom  : 0;
  left    : 0;
  width   : 100%;
  height  : 2.4rem;
}

.usercenter-head .head-msg {
  display    : flex;
  margin-left: 2rem;
  font-size  : 0.36rem;
}

.user-name {
  margin-left: 0.2rem;
}

.usermsg {
  display    : flex;
  align-items: center;
  text-align : center;
  margin-top : 0.8rem;
  font-size  : 0.40rem;
}

.usermsg>div {
  flex: 1;
}

.usermsg .desc {
  color: #ccc;
}

/* 0 */
.grid-item {
  /*margin-top: 0.5rem;*/
}

.grid-title {
  height       : 1rem;
  line-height  : 1rem;
  background   : #fbdde7;
  margin-bottom: 0.2rem;
}

.grid-title div {
  margin-left: 0.4rem;
  color: #808080;
}

.grid-item_card {
  display    : flex;
  align-items: center;
  text-align : center;
  padding    : 0.2rem 0;
}

.grid-card {
  width: calc(100%/3)
}

.grid-card-img {
  width : 1rem;
  height: 1rem;
  margin: 0 auto 0.1rem;
}

.grid-card-img img {
  width : 100%;
  height: 100%;
}

.tabbars {
  position          : fixed;
  height            : 1.4rem;
  width             : 100%;
  position          : fixed;
  bottom            : 0;
  background-color  : #FFFFFF;
  -moz-box-shadow   : 0px -2px 5px #F7F7F7;
  -webkit-box-shadow: 0px -2px 5px #F7F7F7;
  box-shadow        : 0px -2px 5px #F7F7F7;
}
.tabbar-navs {
  height : 1.4rem;
  width  : 100%;
  display: flex;
  align-items: center;
}

.navs {
  width: calc(100%/3);
  text-align: center;
}

.navs p {
  font-size: 10px;
  color    : #FF85AA;
}

.navs .icon-pngs {
  width : 0.6rem;
  height: 0.6rem;
}